<template>
    <div>
        <!-- 顶部标题 -->
        <van-nav-bar title="超级售后，新售后，新服务，新生态"></van-nav-bar>

        <!-- 地址区域选择器 -->
        <van-row style="padding: 20px"@click.native="showPop=true">
            <van-col span="12" >{{showArea}}</van-col>
        </van-row>

        <!-- 地址选择弹窗 -->
        <van-popup v-model="showPop"
                   position="bottom"
        >
            <van-area :areaList="areaList"
                      @confirm="checkArea"
                      :columnsNum="2"
                      value="610100"
            ></van-area>
        </van-popup>

        <!-- 搜索框 -->
        <form action="/">
            <van-search placeholder="请输入商品名称"
                        v-model="searchValue"
                        @search="search"
            />
        </form>


    </div>



</template>
<script>
    import areaList from '@/assets/json/china.json';
    export default {
        name: 'index',
        data() {
            return {
                /* ------------ 区域选择 ----------- */
                showPop: false,
                areaList,
                areaData: '',
                /* ------------ 搜索 ----------- */
                searchValue: ''
            }
        },
        computed:{
            showArea() {
                let areaData = this.areaData;
                if(areaData && areaData[1].code >0) {
                    return areaData[0].name + '--' + areaData[1].name + '↓';
                }else {
                    return '全国↓'
                }
            }
        },
        methods: {
            /* ------------ 区域选择 ----------- */
            checkArea(area) {
                this.areaData = area;
                this.showPop = false;
            },
            /* ------------ 搜索 ----------- */
            search(val) {
                alert(val);
                this.$router.push({
                    path: '/search',
                    query: {
                        searchValue: val
                    }
                });
            }
        }
    }




</script>
